import React from 'react';

/*
<NuiBt
    name="bt"
    hcmd={() => hcmd(uid)}
    disabled={false}
    select={false}
    className={"ml-2"}
    color={"blue"}
    >按钮</NuiBt>
*/

const st_normal = (color) => {
    if (color === "transparent") {
        return `bg-transparent hover:bg-indigo-600 rounded my-1 `;
    }

    return `bg-${color}-600 hover:bg-${color}-700 rounded my-1 `;
};

const g_bt_select = "bg-green-600 hover:bg-green-700 rounded my-1 ";
const g_bt_txt = "py-2 px-5 ml-px text-white text-base ";

const st_disable = (color) => `bg-${color}-600 rounded my-1 opacity-50 cursor-not-allowed `;

const Bt = ({ children, st, disabled, name, hcmd, select=false, className="", color="blue", onMouseDown, onMouseUp }) => {
    const sty = () => {
        if (disabled) {
            return st_disable(color);
        }

        if (select) {
            return g_bt_select;
        }

        return st_normal(color);
    };

    const onKeyPress= (event) => {
        event.preventDefault();
    };

    const onKeyDown= (event) => {
        event.preventDefault();
    };

    const onKeyUp= (event) => {
        event.preventDefault();
    };

    return (
        <button className={sty() + className} name={name} disabled={disabled || false}
            onKeyPress={onKeyPress}
            onKeyDown={onKeyDown}
            onKeyUp={onKeyUp}
            onClick={hcmd} onMouseDown={onMouseDown} onMouseUp={onMouseUp}>
            <div className={st}>
                {children}
            </div>
        </button>
    );
}

const NuiBt = (props) => (<Bt st={g_bt_txt} {...props}/>);

const PanelBt = ({ width="w-48", disabled=false, children, st, name, hcmd, select=false, className="", cl="blue" }) => {
    const color = select ? "green" : cl;

    const sty = () => {
        let ret = `bg-${color}-600 hover:bg-${color}-700 rounded-lg my-1 `;
        if (disabled) {
            ret += "opacity-50 cursor-not-allowed ";
        }

        return ret;
    };

    return (
        <button className={sty() + className} disabled={disabled || false} name={name} onClick={hcmd}>
            <div className={"mt-3 mb-4 text-white font-bold text-xl " + width}>
                {children}
            </div>
        </button>
    );
};

const RgbBt = ({ width="w-48", disabled=false, children, st, hcmd, select=false, className="", cl=[100, 100, 100, "white"] }) => {
    const sty = () => {
        let ret = `rounded-lg my-1 `;
        if (disabled) {
            ret += "opacity-50 cursor-not-allowed ";
        }

        return ret;
    };

    return (
        <button className={sty() + className} disabled={disabled} onClick={hcmd}
        style={{
            background: `rgb(${cl[0]}, ${cl[1]}, ${cl[2]})`,
            color: `${cl[3]}`
        }}>
            <div className={"mt-3 mb-4 font-bold text-xl " + width}>
                {children}
            </div>
        </button>
    );
};

const DBtn = ({ width="w-40", disabled=false, children, name, hcmd, select=false, className="", cl="blue", label, sub }) => {
    const color = select ? "yellow" : cl;

    const sty = () => {
        let ret = `bg-${color}-600 hover:bg-${color}-700 rounded-lg my-1 `;
        if (disabled) {
            ret += "opacity-50 cursor-not-allowed ";
        }

        return ret;
    };

    return (
        <button className={sty() + className} disabled={disabled || false} name={name} onClick={hcmd}>
            <div className={"mt-1 mb-1 text-white font-bold text-xl " + width}>
                <div className="flex flex-col">
                    <div>{label}</div>
                    <div>{sub}</div>
                </div>
            </div>
        </button>
    );
};

const Btn = ({ className, children, hcmd, name, disabled=false }) => {
    let st = `bg-transparent hover:bg-indigo-300 rounded ${className}`;
    let t_st = "px-2 text-blue-600 hover:text-blue-900 text-base";

    if (disabled) {
        st = `bg-transparent rounded ${className} cursor-not-allowed`;
        t_st = "px-2 text-blue-300 text-base cursor-not-allowed";
    }

    return (
        <button className={st} onClick={hcmd} name={name} id={name} disabled={disabled}>
            <div className={t_st}>
                {children}
            </div>
        </button>
    );
};

export {Btn, RgbBt, DBtn, PanelBt, NuiBt};
